import BaseChart from '@/components/echarts/BaseChart';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import { useBasicDataStore } from '@/stores/basicDataStore';
import { useMonthStore } from '@/stores/monthStore';
import { fontSizeRem } from '@/utils/fontSizeRem';
import type { EChartsOption } from 'echarts';
import 'echarts-liquidfill';


const Efficiency = () => {

  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo
  const curMonth = useMonthStore(state => state.month)

  const { staffEfficiency, areaEfficiency, tableTurnover } = basicData.monthlyData[curMonth - 1]

  const options: EChartsOption = {
    title: {
      text: '运营效率',
      left: 'center',
      top: '5%',
      textStyle: {
        color: "#fff",
        fontSize: fontSizeRem(16)
      }
    },
    grid: {
      top: '10%',
      left: '5%',
      right: '5%',
      bottom: 0,
      containLabel: true
    },
    series: [{
      name: '漏斗图',
      color: ['#326af9', '#1890FF', '#176dd7'],
      type: 'funnel',
      gap: 10,
      top: '18%',
      bottom: '2%',
      left: '10%',
      width: '80%',
      min: 40,
      max: 100,
      minSize: '20%',
      maxSize: '100%',
      sort: 'descending',
      legendHoverLink: false,
      label: {
        show: true,
        color: '#fff',
        position: 'inside',
        fontSize: fontSizeRem(12),
        formatter: function (params) {
          let text = '';
          switch (params.dataIndex) {
            case 0:
              text = `翻台率 (${tableTurnover}%)`;
              break;
            case 1:
              text = `人效 ${staffEfficiency}`;
              break;
            case 2:
              text = `坪效 ${Math.round(Number(areaEfficiency))}`;
              break;

          }
          return text;
        },
        rich: {
          value1: {
            color: '#fff',
            fontWeight: 700,
            fontFamily: 'Camar'
          },
          value2: {
            color: '#fff',
            fontWeight: 700,
            fontFamily: 'Camar'
          },
          value3: {
            color: '#fff',
            fontWeight: 700,
            fontFamily: 'Camar'
          },

        }
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 0,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 0
      },
      emphasis: {
        itemStyle: {
          color: '#ccc'
        }
      },
      data: [{
        value: 100,
      },
      {
        value: 80,
      },
      {
        value: 60,
      },
      ]
    }]
  };


  return (
    <>
      <div style={{ width: '100%', height: '29vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default Efficiency;